<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>修改密码</title>
		<link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
		<link th:href="@{/css/style.min.css}" rel="stylesheet">
	</head>

	<body>
		<div class="lyear-layout-web">
			<div class="lyear-layout-container">
				<div th:replace="comm/WL2022-CommUserAdmin :: #commLeftNavigation"></div>
				<div th:replace="comm/WL2022-CommUserAdmin :: #commHeader"></div>

				<!--页面主要内容-->
				<main class="lyear-layout-content">

					<div class="container-fluid">

						<div class="row">
							<div class="col-lg-12">
								<div class="card">
									<div class="card-body">
										<form class="site-form">
											<div class="form-group">
												<label for="oldPassword">旧密码</label>
												<input type="password" class="form-control" name="oldPassword"
													id="oldPassword" placeholder="输入账号的原登录密码">
											</div>
											<div class="form-group">
												<label for="newPassword">新密码</label>
												<input type="password" class="form-control" name="newPassword"
													id="newPassword" placeholder="输入新的密码" autocomplete="off" >
											</div>
											<div class="form-group">
												<label for="confirmPassword">确认新密码</label>
												<input type="password" class="form-control" name="confirmPassword"
													id="confirmPassword" placeholder="请确认新密码" autocomplete="off" >
											</div>
											<button  class="btn btn-primary" lay-submit
													lay-filter="submitPwd">修改密码</button>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</main>
				<!--End 页面主要内容-->
			</div>
		</div>
		<script th:src="@{/layui/layui.js}"></script>
		<script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/perfect-scrollbar.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
		<script>
			layui.use(['jquery', 'form',], function () {
				const layer = layui.layer;
				const form = layui.form;
				const $ = layui.jquery;

				form.on('submit(submitPwd)', function () {
					let oldPassword = $("#oldPassword").val();
					let newPassword = $("#newPassword").val();
					let confirmPassword = $("#confirmPassword").val();

					if (oldPassword===""||oldPassword===null) {
						layer.msg('原密码不能为空！', {icon: 5});
						return false;
					}
					if (!(/^[\S]{6,12}$/.test(newPassword))){
						layer.msg('密码必须6到12位，且不能出现空格！', {icon: 5});
						return false;
					}
					if( newPassword!==confirmPassword){
						layer.msg('两次密码不一致！', {icon: 5});
						return false;
					}
					$.ajax({
						url: "[[@{/user/updatePwd}]]",
						type: "post",
						data:{
							oldPwd:oldPassword,
							newPwd:newPassword
						},
						success: function (r) {
							if(r){
								$("#oldPassword").val("");
								$("#newPassword").val("");
								$("#confirmPassword").val("");
								layer.open({
									title: '修改成功',
									content: '修改成功',
									icon: 6,
								});
							}else {
								$("#oldPassword").val("");
								layer.open({
									title: '修改失败',
									content: '原密码错误，请重新填写！',
									icon: 5,
								});
							}
						},
						error: function () {
							layer.open({
								title: '程序出错',
								content: '程序故障！麻烦联系一下管理员',
								icon: 5
							});
						}
					})
					return false;
				})
			});
		</script>
	</body>
</html>
